<template>
    <div>
        <div class="search" id="main">
            <div class="input">
                <p>
                    <label>订单号：</label>
                    <el-input placeholder="请输入订单号" autofocus ref="el-input" class="el-input" @change="search" v-model="searchData"></el-input>&nbsp;&nbsp;
                </p>
                <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
            </div>
            <div class="content">
                <OrderDetail :orderNum="abc">

                </OrderDetail>
            </div>

        </div>
    </div>
</template>
<script>
import OrderDetail from '@/components/orderDetail.vue'
 import {
   getexpressDetails,
  } from '@/api/appraiserAdmin/appraiserAdmin'
export default {
    components:{
        OrderDetail
    },
    data(){
        return {
            abc:'',
            searchData:'',
        }
    },
    mounted(){
       this.$refs['el-input'].focus();
    //    this.getexpressListdetail('1');
    },
    methods:{
        search(){
            this.abc = this.searchData;
            // this.getexpressListdetail(this.searchData);
        },
    }
}
</script>
<style scoped>
    .search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.el-input {
    width: 300px;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
#main .el-input {
  width:400px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
.region{
	width:120px;
}
.content{
    padding-left: 20px;padding-top:20px;
    box-sizing: border-box;
}
</style>
